<template>
	<div>
	<top-nav bgColor="white" title="线上订单"  btnName="btn"  :rightShow="false"  returnPath="hongchangGrantBillsList" ></top-nav>
	<div style="width: 100%;height: 3rem;"></div>
		<section style="text-align: left;width: 100%;height: 30rem;padding: 0 1.5rem;position: relative;border-bottom: 1px solid gainsboro;">

			<section class="grant-title">			
				<label class="left-Grant">订单编号：</label>
				<span class="grant-span" >		{{data.BillNo}}</span>
			</section>
			<section class="grant-title">
				<label class="left-Grant">客户编号：</label>
				<span class="grant-span">		{{data.CustomNumber}}</span>
			</section>
			<section class="grant-title">
				<label class="left-Grant">客户名称：</label>
				<span class="grant-span">		{{data.CustomName}}</span>
			</section>
			<section class="grant-title">
				<label class="left-Grant">
					<!--<span class="grant-two-letter" >产</span>
					<span>品：</span>-->
					产品：
				</label>
				<span class="grant-span">		{{data.ItemName}}</span>
			</section>
			<section class="grant-title">
				<label class="left-Grant">
					<!--<span class="grant-two-letter">数</span>
					<span>量：</span>-->
					数量：
				</label>
				<span class="grant-span">		{{data.Qty}}</span>
			</section>
			<section class="grant-title">
				<!--<label class="grant-lab">
					<span class="grant-two-letter">已</span>
					<span>发：</span>-->
					<label class="left-Grant">已发：</label>
				</label>
				<span class="grant-span">		{{data.UsedQty}}</span>
			</section>

			<section class="input-add">
				
				<input type="checkbox"  v-model="data.IsReptLadingCode" disabled="disabled"><label class="left-Grant" >可重复使用提货码</label>
                               
			</section>
			
			<section class="grant-title">
				<label class="left-Grant">创建时间：</label>
				<span class="grant-span">		{{data.CreateTime}}</span>
			</section>
			<section class="grant-title">
				<label class="left-Grant">开始时间：</label>
				<span class="grant-span">		{{data.StartTime}}</span>
			</section>
			<section class="grant-title">
				<label class="left-Grant">结束时间：</label>
				<span class="grant-span">		{{data.EndTime}}</span>
			</section>
			
<!--			{{data}}-->
						<!--<section class="title">
				<label style="flex: 2;">客户姓名：</label>
				<span style="flex: 7;text-align: left;">		{{CustomName}}</span>
			</section>
						<section class="title">
				<label style="flex: 2;">客户姓名：</label>
				<span style="flex: 7;text-align: left;">		{{CustomName}}</span>-->
			</section>
	<section style="height: 3rem;display: flex;justify-content: flex-end;align-items: center;">
		  <!--<mu-float-button icon="add" mini class="demo-float-button" @click="openAddCar"/>-->
		  	<mu-flat-button @click="openAddCar" class="mu-btn" style="margin-right: 0.4rem;">新增</mu-flat-button>
		  	<!--<mu-flat-button @click=""  class="mu-btn" v-show="checkBox" style="margin-right: 0.4rem;background-color: #ed2c3e;" >删除</mu-flat-button>-->
		  	<mu-flat-button @click="edit()"  class="mu-btn" v-show="!checkBox" style="margin-right: 1.2rem;background-color: #28e373;" >编辑</mu-flat-button>
		  	<mu-flat-button @click="cancelEdit()" v-show="checkBox"  class="mu-btn" style="margin-right: 1.2rem;background-color: red;" >取消</mu-flat-button>
	</section>
	<section style="margin-bottom: 4rem;">
			<!--<section class="table-title" >
				<span>详情</span>
		    	<span>车牌号</span>
		    	<span>数量</span>
		    	<span>授权码</span>
		    </section>
		    <section v-for="(item,index) in carList"
		    	 @click="delCar(item,index)" 
		    	 class="table-tr">
		    	<span>		  
		    		<mu-float-button icon="remove_circle" mini class="demo-float-button" @click="delCar(item,index)"/>
				</span>
		    	<span >{{item.CarNo}}</span>
		    	<span >{{item.Qty}}</span>	
		    	<section class="Unbundling" >
					 {{item.Code}}
				</section>
				
		    </section>-->
		    
		    <mu-table multiSelectable enableSelectAll ref="table" :showCheckbox="false"  style="padding: 0 0.6rem;">
			    <mu-thead>
			      <mu-tr style="">
			      	<!--<mu-th class="mu-tab-title" >详情</mu-th>-->
			        <mu-th class="mu-tab-title" >车牌号</mu-th>
			        <mu-th class="mu-tab-title" >数量</mu-th>
			        <mu-th v-show="!checkBox" class="mu-tab-title" >授权码</mu-th>
			        <mu-th v-show="checkBox" class="mu-tab-title" >操作</mu-th>
			      </mu-tr>
			    </mu-thead>
			    <mu-tbody >
			      <mu-tr v-for="(item,index) in carList" :key = "index" >
			      	<!--<mu-td style="height: 1.2rem;" @click="delCar(item,index)">删除</mu-td>-->
			        <mu-td style="height: 1.2rem;">{{item.CarNo}}</mu-td>
			        <mu-td>{{item.Qty}}</mu-td>
<!--			        <mu-td v-show="!checkBox">{{item.Code}}</mu-td>-->
			        <mu-td v-show="!checkBox" @click="send(item)"><span class="list-del" style="background:rgb(0, 144, 255);">{{item.Code}}</span></mu-td>
			        <mu-td v-show="checkBox" @click="delCar(item,index)"><span class="list-del">删除</span></mu-td>
			      </mu-tr>
			      <!--<mu-tr >
			        <mu-td style="height: 1.2rem;">鲁A54891</mu-td>
			        <mu-td>0(测试)</mu-td>
			        <mu-td>155</mu-td>
			        <mu-td v-show="checkBox"><span class="list-del">删除</span></mu-td>
			      </mu-tr>-->
			    </mu-tbody>
		</mu-table>
		    
		    
	</section>
		<mu-dialog :open="isDel" title="提示" @close="closeDel">
		         是否删除当前车辆, 是否保存?
		    <mu-flat-button slot="actions" @click="closeDel('cancel')" primary label="取消"/>
		    <mu-flat-button slot="actions" primary @click="closeDel('sure')" label="确定"/>
		</mu-dialog>
		<mu-dialog :open="isPop" title="提示" @close="closeSave">
		         请确认信息是否准确, 是否保存?
		    <mu-flat-button slot="actions" @click="closeSave('cancel')" primary label="取消"/>
		    <mu-flat-button slot="actions" primary @click="closeSave('sure')" label="确定"/>
		</mu-dialog>

		<mu-dialog :open="dialog" title="新增车辆" @close="closeAccount" >
			<section class="pop-input">
				<label style="flex: 3;font-size: 0.8rem;">车牌号：</label>
				<mu-text-field class="right-mu-input" underlineFocusClass="borderClassFocus"    hintText="车牌号" v-model="carNumber" />

			</section>
			<section class="pop-input">
				<label style="flex: 3;font-size: 0.8rem;">预装量：</label>
				<mu-text-field class="right-mu-input" underlineFocusClass="borderClassFocus"    hintText="预装量" v-model="Qty"  type="number" />
			</section>
			<mu-flat-button slot="actions" @click="saveCar" primary label="保存"/>
		    <mu-flat-button slot="actions" @click="closeAccount()" primary label="取消"/>
	    </mu-dialog>
	</div>
</template>

<script>
	 import TopNav from '@/components/nav/topNav.vue'
	  export default {
		components: {
		      TopNav
		},
		data(){
			return{
			carList:[
			{
				Number:'鲁A12345',
				Total:'60吨',
				Card:123456
			}
			],
			data:{},
			dialog:false,
			isPop:false,
			isDel:false,
			delData:{},
			carNumber:null,
			Qty:0,
			checkBox:false
			}
		},
		mounted(){
			this.ID=this.$route.params.ID
			//this.data=this.$route.params.data
			this.getAppOrderBill()
		
		},
		methods:{
			edit(){
				this.checkBox=true
			},
			cancelEdit(){
				this.checkBox=false
			},
			send(data){
				console.info(data)
				var u = navigator.userAgent;
    	 		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    	 		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		 		var msg   		
    			if(isAndroid){
    				msg='sms:?body='+data.CarNo+'的车主您好，请到'+localStorage.factoryName+'提货，品种：'+this.data.ItemName+'，预装量：'+data.Qty+'吨，'+'提货码：'+data.Code+'#mp.weixin.qq.com'
    			}else{
    	    		msg='sms:&body='+data.CarNo+'的车主您好，请到'+localStorage.factoryName+'提货，品种：'+this.data.ItemName+'，预装量：'+data.Qty+'吨，'+'提货码：'+data.Code

    			}
		 window.location.href = msg
			},
			getAppOrderBill(){
				let that=this
				that.axios.post('/A01/getAppOrderBill',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'ID':that.ID	
				}).then(function(response){
					that.data=response.data.data
					that.carList=response.data.data.CarList
					console.info(response.data.data)
				}).catch(function(error){
					
				})
				},
			carForm(val,index){
					console.info(val)
				},
			openAddCar(){
					this.dialog=true
				},
			closeAccount(){
					this.dialog=false	
				},
			saveCar(){
				this.isPop=true
				},
			closeSave(val){
			if(val=='sure'){
				this.addCar()
			}
			this.isPop=false
			this.dialog=false
				},
			closeDel(val){
			if(val=='sure'){
				this.delAddCar()
			}
			this.isDel=false
			},
			addCar(){
				let that=this
				that.axios.post('/A01/AppCarListAdd',{
				'factoryId':localStorage.factoryId,
				'uid':localStorage.uid,
				'BillID':that.data.ID,
				'CarNo':that.carNumber,
				'Qty':that.Qty
				}).then(function(response){
					if(response.data.code==0){
						that.$message({type: 'success',message: '保存成功!',duration:1500})
          				that.getAppOrderBill()
          				//that.$router.replace({path:'hongchangAddGrantBills'})
					}else{
						that.$message({type: 'info',message: '保存失败',duration:1500});
					}
				}).catch(function(error){
					that.$message({type: 'info',message: '保存失败',duration:1500});
				})
			},
			
			delCar(data,index){
				console.info(data)
				this.isDel=true
				this.delData=data
			},
			delAddCar(){
				let that=this
				that.axios.post('/A01/AppCarListDel',{
				'factoryId':localStorage.factoryId,
				'uid':localStorage.uid,
				'RowID':that.delData.RowID
				}).then(function(response){
					if(response.data.code==0){
						that.$message({type: 'success',message: '删除成功!',duration:1500})
						that.getAppOrderBill()
          				//that.$router.replace({path:'hongchangAddGrantBills'}h)
					}else{
						that.$message({type: 'info',message: '删除失败',duration:1500});
					}
				}).catch(function(error){
					that.$message({type: 'info',message: '删除失败',duration:1500});
				})
			}
	 		}
		}
</script>

<style scoped>
.Unbundling{
  	 width: 20%;
  	 height: 2rem;
  	 border-radius: 3px;
  	 display: flex;
  	 align-items: right;
  	 justify-content: right;
  	 background-color: #f56c6c;
  	 color:white
  }
.list-del{
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
	background: #ed2c3e;
	color: white;
	font-size: 0.7rem;
}
.mu-tab-title{
	color:#0090FF;
	height: 2rem;
	font-size: 0.8rem;
}
.mu-btn{
	width: 3.6rem;
	height: 1.4rem;
	background: rgb(0, 144, 255);
	color: white;
	font-size: 0.8rem;
	min-width: 3rem;
}
.mu-btn-left{
	width: 3.6rem;
	height: 1.4rem;
	background: rgb(0, 144, 255);
	color: white;
	font-size: 0.8rem;
	min-width: 1rem;
}
.left-Grant{
		flex: nowrap;
	}
	.right-mu-input{
		flex: 10;
		margin-top: 0.6rem;
	}
	.input-add{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
		flex-direction: row;
	}
	.grant-lab{
		flex: 2;
	}
	.grant-span{
		flex: 7;
		text-align: left;
	}
	.grant-two-letter{
		margin-right: 1.6rem;
	}
	.grant-title{
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	.pop-input{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	.choiceBtn{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 4.6rem;
		background-color: #0090FF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.6rem;
		color: white;
		font-size: 0.7rem;
		border-radius: 3px;
	}
	.choice-list{
		width: 100%;
		height: 100%;
		margin-top: 0.6rem;
	}
	.choice-sec{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec{
		display: flex;
		flex-direction: column;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec span{
		text-align:left;
		height:2rem;
		text-indent: 0.6rem;
		line-height: 2rem;
	}
	.choice-bg{
		background: #e5e5e5;
	}
	.choice-sec span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 0.6rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		/*border: 1px solid #e5e5e5;*/
		margin-top: 1.6rem;
	}
	.show-list span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-sec-input{
		height: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
		margin-bottom: 0.6rem;
		padding-right: 0.6rem;
	}
	.height-show{
		height: 2rem;
		line-height: 2rem;
	}
	.mu-text-field{
		font-size: 0.8rem!important;
	}
	.table-title{
		color: rgb(0, 144, 255);
		font-size: 0.9rem;
	}
	.table-title,.table-tr{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 2.4rem;
		border-bottom: 1px solid rgba(234,234,234,.8);
		
	}
	.table-tr{
		font-size: 0.8rem;
	}
	.choice-table-tr{
		background-color: rgba(234,234,234,.5);
	}
	.table-title span:nth-child(1),.table-tr span:nth-child(1){
		flex: 1.5;
	}
	.table-title span:nth-child(2),.table-tr span:nth-child(2){
		flex: 1;
	}
	.table-title span:nth-child(3),.table-tr span:nth-child(3){
		flex: 1;
	}
</style>